<template>
    <div>
        <div class="imgbackground">
            <img class="avatar" :src="userDetail.userAvatar" alt="avatar" />
            <div class="name">
                {{ userDetail.nick }}
            </div>
            <div>
                {{ userDetail.signature }}
            </div>
            <!-- 再次点击已关注则弹出取消关注提醒 -->
            <div>
                <el-button
                    type="danger"
                    v-if="token === '' || isFollowed === 0"
                    @click="_follow"
                    >关注</el-button
                >
                <el-button type="danger" v-else @click="_cancleFollow"
                    >已关注</el-button
                >
            </div>

            <el-row>
                <el-col class="describe" :span="4"><span>作品</span></el-col>
                <el-col class="describe" :span="5"><span>收藏</span></el-col>
                <el-col class="describe" :span="6"><span>关注</span></el-col>
                <el-col class="describe" :span="5"><span>粉丝</span></el-col>
                <el-col class="describe" :span="4"><span>被赞</span></el-col>
            </el-row>
            <el-row>
                <el-col class="describe_title" :span="4"
                    ><span>{{ userDetail.photoCounts }}</span></el-col
                >
                <el-col class="describe_title" :span="5"
                    ><span>{{ userDetail.collectionCounts }}</span></el-col
                >
                <el-col class="describe_title" :span="6"
                    ><span>{{ userDetail.followCounts }}</span></el-col
                >
                <el-col class="describe_title" :span="5"
                    ><span>{{ userDetail.fanCounts }}</span></el-col
                >
                <el-col class="describe_title" :span="4"
                    ><span>{{ userDetail.approvalCounts }}</span></el-col
                >
            </el-row>
        </div>
        <div class="userInfo">
            <el-tabs type="border-card" :stretch="true">
                <el-tab-pane label="TA作品">
                    <span slot="label">TA作品</span>
                    <el-card class="container">
                        <transition name="el-fade-in-linear">
                            <el-row v-show="workShow">
                                <el-col
                                    :span="8"
                                    v-for="(item, index) in worksDetail"
                                    :key="index"
                                >
                                    <el-card
                                        class="box-card"
                                        :body-style="{
                                            margin: '5px',
                                            padding: '0px',
                                        }"
                                    >
                                        <img
                                            :src="item.link"
                                            class="image"
                                            lazy
                                        />
                                        <div style="padding: 14px">
                                            <div class="bottom clearfix">
                                                <el-button
                                                    type="text"
                                                    class="button"
                                                    @click.native="
                                                        _openPhotoDetail(
                                                            item.photoId
                                                        )
                                                    "
                                                    >查看</el-button
                                                >
                                            
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </transition>
                        <el-button @click="_toLastPhotos">上一页</el-button>
                        <el-button @click="_toNextPhotos">下一页</el-button>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 图片详情 -->
        <!-- dialogVisible：true:打开/false:关闭 -->
        <!-- photoId：传入图片id -->
        <!--  @close="photoDetailVisible = false" 必须否则有警告（el-dialog的警告）  -->
        <photo-detail
            :dialogVisible="photoDetailVisible"
            :photoId="photoId"
            @close="photoDetailVisible = false"
        />
    </div>
</template>



<script>
import userApi from '../request/userApi';
import fanApi from '../request/fanApi';
import imageApi from '../request/imageApi';
import PhotoDetail from '../component/PhotoDetail.vue';
export default {
    components: {
        PhotoDetail,
    },
    data() {
        return {
            userDetail: {
                userAvatar:
                    'https://pic1.zhimg.com/50/v2-f225e904be1efeceef85e019755325ca_hd.jpg?source=1940ef5c',
                nick: 'NAN',
                signature: 'NAN',
                collectionCounts: '999',
                followCounts: '999',
                fanCounts: '999',
                approvalCounts: '999',
            },
            token: '',
            isFollowed: 0,
            userId: '',
            pageNum: 1,
            pages: 0,
            workShow: false,
            // 作品列表
            worksDetail: [],
            // 评论列表
            commentList: [],
            // 图片详情
            photoDetailVisible: false,
            // 图片id
            photoId: null,
        };
    },
    methods: {
        _getLoginInfo() {
            userApi.checkLogin().then((res) => {
                if (res.code === 200) {
                    // 已登录的情况
                    this.token = window.sessionStorage.getItem('token');
                    // 检查是否已经关注
                    this._checkIsFollow();
                    return;
                }
            });
        },
        _getThisUserInfo() {
            userApi.getUserInfoById(this.userId).then((res) => {
                if (res.code !== 200) {
                    this.$message.error('获取用户信息失败');
                    return;
                }
                this.userDetail = res.data;
                console.log(this.userDetail)
                // 查询个人作品
                this._getUserPhotos();
            });
        },
        _checkIsFollow() {
            fanApi.checkIsFan(this.userId).then((res) => {
                this.isFollowed = res.data;
            });
        },
        _follow() {
            if (window.sessionStorage.getItem('token') === null) {
                this.$message.error('请先登录');
                return;
            }
            fanApi.follow(this.userId).then((res) => {
                if (res.code !== 200) {
                    this.$message.error('关注失败');
                    return;
                }
                this.$message.success('关注成功');
                this.isFollowed = 1;
                this._getThisUserInfo();
            });
        },
        _cancleFollow() {
            this.$confirm('确定取消关注吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    fanApi.cancleFollow(this.userId).then((res) => {
                        if (res.code !== 200) {
                            this.$message.error('取消关注失败');
                            return;
                        }
                        this.$message.success('取消关注成功');
                        this.isFollowed = 0;
                        this._getThisUserInfo();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消取消关注',
                    });
                });
        },
        // 查询用户作品
        _getUserPhotos() {
            this.workShow = false;
            var data = {
                userid: this.userDetail.userId,
                pageNum: this.pageNum,
            };
            imageApi.getPhotoByUserId(data).then((res) => {
                if (res.code === 200) {
                    this.worksDetail = res.data.list;
                    this.pages = res.data.pages;
                    this.workShow = true;
                }
            });
        }, // 前往上一页作品
        _toLastPhotos() {
            if (this.pageNum === 1) {
                this.$message.error('已经是第一页了');
                return;
            }
            this.pageNum--;
            this._getUserPhotos();
        },
        // 前往下一页作品
        _toNextPhotos() {
            if (this.pageNum === this.pages) {
                this.$message.error('已经是最后一页了');
                return;
            }
            this.pageNum++;
            this._getUserPhotos();
        },
        // 查看图片详情
        _openPhotoDetail(id) {          
            this.photoDetailVisible = true;
            this.photoId = id;
        },
    },
    created() {
        this.userId = this.$route.params.id;
        // 关闭标签高亮状态
        this.$store.commit('changeSelectState', -1);
        this._getThisUserInfo();
        this._getLoginInfo();
    },
};
</script>


<style scoped>
.imgbackground {
    background-image: url(../assets/img/R-C.jpg);
    height: 350px;
    width: 100%;
    text-align: center;
}
.imgbackground .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 30px;
}
.editBox .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 40px;
}
.describe {
    margin-top: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.describe :hover {
    color: #40ff96;
}
.describe_title {
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}
.describe_title :hover {
    color: #ffaf40;
}
.userInfo {
    text-align: center;
}
.name {
    font-weight: bold;
}
.signature :hover {
    color: #407cff;
}
.editBox {
    text-align: center;
}
.avatarContain {
    text-align: center;
    height: 300px;
    overflow-y: scroll;
}
.avataritem {
    width: 150px;
    height: 150px;
    cursor: pointer;
}
.container {
    height: 700px;
    width: 80%;
    margin-left: 10%;
    overflow-y: auto;
}
.box-card {
    width: 90%;
    height: 260px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 4px;
}
.image {
    width: 100%;
    height: 200px;
    border-radius: 4px;
}
</style>